<template>
	<div class="layout-padding">
		<div>
			<el-form ref="searchFormRef" :model="searchForm">
				<el-row class="mb-20">
					<el-col :span="8" style="margin-bottom: 20px">
						<el-form-item label="会员昵称" prop="nickname" label-width="130px">
							<el-input v-model="searchForm.nickname" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="联系方式" prop="phoneNumber" label-width="130px">
							<el-input v-model="searchForm.phoneNumber" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="邀请人邀请码" prop="invitationCode" label-width="130px">
							<el-input v-model="searchForm.invitationCode" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="邀请人昵称" prop="inviterUserName" label-width="130px">
							<el-input v-model="searchForm.inviterUserName" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="邀请人联系方式" prop="inviterPhoneNumber" label-width="130px">
							<el-input v-model="searchForm.inviterPhoneNumber" />
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1" label-width="0px">
						<el-form-item>
							<el-button formDialogRef icon="search" type="primary" @click="handleSearch"> 搜索 </el-button>
							<el-button icon="Refresh" formDialogRef @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column type="index" width="100" label="#" />
			<el-table-column prop="openid" label="小程序openid" />
			<el-table-column prop="nickname" label="会员昵称" />
			<el-table-column prop="phoneNumber" label="联系方式" />
			<el-table-column prop="mineInvitationCode" label="邀请码" />
			<el-table-column prop="invitationCode" label="邀请人邀请码" />
			<el-table-column prop="inviterUserName" label="邀请人" />
			<el-table-column prop="inviterPhoneNumber" label="邀请人联系方式" />
			<el-table-column prop="createDate" label="注册时间" />
			<el-table-column label="操作" width="140">
				<template #default="scope">
					<el-button size="small" :disabled="!!scope.row.invitationCode" type="success" @click="handleBind(scope.row)">绑定</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex-center">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[100, 200, 300, 400]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		<!-- 绑定 -->
		<el-dialog v-model="centerDialogVisible" title="绑定" width="55%" align-center>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm" :size="formSize" status-icon>
				<!-- <el-form-item label="邀请人" prop="inviterUserName">
					<el-input v-model="ruleForm.inviterUserName" />
				</el-form-item>
				<el-form-item label="邀请人联系方式" prop="inviterPhoneNumber">
					<el-input v-model="ruleForm.inviterPhoneNumber" />
				</el-form-item> -->
				<el-form-item label="邀请码" prop="invitationCode">
					<el-input v-model="ruleForm.invitationCode" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleDialogClose">关闭</el-button>
					<el-button type="primary" @click="handleFormAddClick">绑定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchList, delObjs, putObj } from '/@/api/coalSystem/userInfo';
import { ElMessage } from 'element-plus';

// 表格内容逻辑
const tableRowClassName = ({ rowIndex }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};
const tableData = ref([]);
// 表格删除
const handleDelete = (index, row) => {
	delObjs(row.userInfoId).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
// 搜索表单区域 --------------------------------------------------
const searchFormRef = ref();
const searchForm = ref({
	nickname: '',
	phoneNumber: '',
	invitationCode: '',
	inviterUserName: '',
	inviterPhoneNumber: '',
});
const handleSearch = () => {
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
const resetQuery = () => {
	searchFormRef.value.resetFields();
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
// 表格分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
	getFetchList();
});
// 查询列表
const getFetchList = () => {
	fetchList({
		current: currentPage.value,
		size: pageSize.value,
		userType: 1,
		...searchForm.value,
	})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				tableData.value = data.records;
				total.value = data.total;
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getFetchList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getFetchList();
};
// 弹窗区域
const centerDialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
	inviterUserName: '',
	inviterPhoneNumber: '',
	userInfoId: '',
	invitationCode: '',
});
const rules = ref({
	inviterUserName: [{ required: true, message: '请输入', trigger: 'blur' }],
	inviterPhoneNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
});
// 绑定
const handleBind = (row) => {
	nextTick(() => {
		ruleForm.value = row;
	});
	centerDialogVisible.value = true;
};
const handleDialogClose = () => {
	ruleFormRef.value.resetFields();
	centerDialogVisible.value = false;
};
// 弹窗绑定
const handleFormAddClick = () => {
	putObj({
		...ruleForm.value,
	}).then((res) => {
		// console.log(res, '==========');
		const { code, msg } = res;
		if (code == 0) {
			ElMessage({
				message: '绑定成功',
				type: 'warning',
			});
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
		handleDialogClose();
		getFetchList();
	});
};
</script>
<style scoped>
.mb-20 {
	margin-bottom: 20px;
}

.el-pagination {
	justify-content: center !important;
}
</style>
